import React, { useEffect, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import {
    Button,
    Breadcrumb,
    Form,
    Input,
    Radio,
    Select,
    Upload,
    message,
} from 'antd';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { getChannels, publishArticle } from '@/apis/article';
const normFile = e => {
    if (Array.isArray(e)) {
        return e;
    }
    return e === null || e === void 0 ? void 0 : e.fileList;
};
const Publish = () => {
    const [channels, setChannels] = useState([])
    const [imageType, setImageType] = useState('1')
    const [fileList, setFileList] = useState([])
    useEffect(() => {
        return async () => {
            const res = await getChannels()
            // console.log(res.data.data.channels)
            setChannels(res.data.data.channels)
        }
    }, [])

    const onFinish = (values) => {
        const { title, content, channel_id, cover } = values
        const resData = {
            title: title,
            content: content,
            cover: {
                type: cover,
                images: fileList.map(item=> item.response.data.url)
            },
            channel_id: channel_id
        }
        console.log(resData)
        publishArticle(resData)
        message.success('发布成功')
    }

    const handonleChange = (values) => {
        setImageType(values.target.value)
        console.log(values.target.value)
    }
    
    const onChange = (info) => {
        if (info.file.status === 'done') {
            setFileList(info.fileList)
            message.success(`图片上传成功`);
            // console.log(info.file.response.data.url)
            // console.log(info.fileList)
        }else if (info.file.status === 'error') {
            message.error(`图片上传失败`);
        }
    }
    return (
        <div>
            <Breadcrumb
                items={[
                    {
                        title: <a href="/">首页</a>,
                    },
                    {
                        title: '发布文章',
                    }
                ]}
                style={{ margin: '10px' }}
            />

            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout=""
                style={{ maxWidth: 800, display: 'flex', flexDirection: 'column', width: '100%' }}
                className='form'
                onFinish={onFinish}
            >
                <Form.Item label="标题" required='true' name='title'>
                    <Input placeholder='请输入文章标题' />
                </Form.Item>
                <Form.Item label="频道" required='true' name='channel_id'>
                    <Select placeholder='请选择文章频道'>
                        {channels.map((item) => {
                            return (
                                <Select.Option key={item.id} value={item.id}>
                                    {item.name}
                                </Select.Option>
                            )
                        })}
                    </Select>
                </Form.Item>
                <Form.Item label="封面" name='cover'>
                    <Radio.Group name='type' defaultChecked={0} onChange={handonleChange} defaultValue={1}>
                        <Radio value={1}> 单图 </Radio>
                        <Radio value={3}> 三图 </Radio>
                        <Radio value={0}> 无图 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="" valuePropName="fileList" getValueFromEvent={normFile} style={{ marginLeft: '100px' }} name='images'>
                    {imageType !== 0 &&
                        <Upload action="https://geek.itheima.net/v1_0/upload"
                            listType="picture-card"
                            showUploadList
                            onChange={onChange}
                            name='image'
                            maxCount={imageType}
                        >
                            {fileList.length < 3 && <button
                                style={{ color: 'inherit', cursor: 'inherit', border: 0, background: 'none' }}
                                type="button"
                            >
                                <PlusOutlined />
                            </button>
                            }
                        </Upload>
                    }
                </Form.Item>

                <Form.Item label="内容" required='true' name='content'>
                    <ReactQuill theme="snow" placeholder='请输入文章内容' style={{ height: '200px', width: '40vw' }} ></ReactQuill>
                </Form.Item>

                <Form.Item style={{ marginLeft: '40px', marginTop: '30px' }}>
                    <Button type="primary" htmlType="submit">发布文章</Button>
                </Form.Item>
            </Form>
        </div>
    )
}

export default Publish